<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>BBLOG-CLOUD安全认证</title>
</head>
<style>

    html {
        padding: 0px;
        margin: 0px;
    }

    .title {
        background-color: #E9686B;
        height: 50px;
        padding-left: 20%;
        padding-right: 20%;
        color: white;
        line-height: 50px;
        font-size: 18px;
    }

    .title-left {
        float: right;
    }

    .title-right {
        float: left;
    }

    .title-left a {
        color: white;
    }

    .container {
        max-width: 300px;
        margin: 0 auto;
        clear: both;
        text-align: center;
    }
    .input{
        margin-top: 20px;
    }
    .text_input{
        width: 100%;
        height: 35px;
        line-height: 35px;
        border: 1px solid #E9686B;
        border-radius: 2px;
        padding-left: 10px;
        box-sizing: border-box;
        background: #FFFFFF;
        letter-spacing: .6px;
        outline: none;
    }
    .sbmit {
        width: 300px;
        height: 35px;
        line-height: 35px;
        cursor: pointer;
        border-radius: 2px;
        background-color: #E9686B;
        color: white;
        border: none;
        font-size: 15px;
        outline: none;
    }
</style>
<body style="margin: 0px">
<div class="title">
    <div class="title-right">BBLOG-CLOUD 授权</div>
    <div class="title-left">
        <a href="#help">帮助</a>
    </div>
</div>
<div class="container">
    <h3 th:text="${clientId}+' 请求授权，该应用将获取你的以下信息'"></h3>
    <p>账号密码安全登录</p>
    <form method="post" action="/oauth/authorize" onsubmit="return login.validate();">
        <input type="hidden" name="user_oauth_approval" value="true">
        <div class="input">
            <input class="text_input" type="text" name="username" placeholder="账号" />
        </div>
        <div class="input">
            <input class="text_input" type="password" name="password" placeholder="密码" />
        </div>
        <div class="input">
            <button class="sbmit" type="button">授权并登录</button>
        </div>
    </form>
</div>
</body>
<script type="text/javascript" src="/plugins/jquery/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="/plugins/layer/layer.js"></script>
<script>
    var login = {
        data: {
            username: "",
            password: ""
        },
        validate: function() {
            login.data.username = $("input[name='username']").val();
            login.data.password = $("input[name='password']").val();
            if (!login.data.username) {
                $("input[name='username']").focus();
                layer.msg("请输入用户名", {
                    icon: 2
                });
                return false;
            }
            if (!login.data.username) {
                $("input[name='password']").focus();
                layer.msg("请输入密码", {
                    icon: 2
                });
                return false;
            }
            return true;
        },
        submit: function() {
            $.ajax({
                url: "/oauth2/authorize",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                data: login.data,
                beforeSend: function(xhr) {
                    layer.load();
                },
                success: function(result, status, xhr) {
                    layer.closeAll('loading');
                },
                error: function(xhr, textStatus, errorThrown) {
                    layer.closeAll('loading');
                    layer.msg("请求异常", {
                        icon: 5
                    });
                }
            });
        }
    };
    $(function() {
        //login.init();
    });
</script>
</html>
